<template>
  <div
    class="el-input-number thisNumber"
    :class="{ small: small !== undefined && small !== false }"
  >
    <span
      role="button"
      class="el-input-number__decrease"
      :class="{
        'is-disabled': disabled || (value !== '' && value <= (min ? min : 0)),
      }"
      @click="changeValue(-1)"
    >
      <i class="el-icon-minus"></i>
    </span>
    <span
      role="button"
      class="el-input-number__increase"
      :class="{
        'is-disabled':
          disabled ||
          (value !== '' && value >= (max || max === 0 ? max : 9999)),
      }"
      @click="changeValue(1)"
    >
      <i class="el-icon-plus"></i>
    </span>
    <el-input
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="inputEvent"
      @blur="blurEvent"
      auto-complete="off"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'inputNum',
  props: ['value', 'max', 'min', 'small', 'decimal', 'disabled', 'placeholder'],
  data() {
    return {}
  },
  methods: {
    judgeValue(v) {
      v > (this.min ? this.min : 0) ? null : (v = this.min ? this.min : 0)
      v < (this.max || this.max === 0 ? this.max : 9999)
        ? null
        : (v = this.max ? this.max : 9999)
      return v
    },
    inputEvent(v) {
      this.$emit('input', v)
    },
    blurEvent() {
      let v = this.value
      if (v) {
        let decimal = v.toString().split('.')[1]
        v = v.toString().split('.')[0]
        // console.log(this.decimal);
        if (this.decimal) {
          v += decimal ? '.' + decimal.slice(0, Number(this.decimal)) : ''
        }
        v = v.toString().replace(/[^0-9-.]/g, '')
        v = Number(v)
        v = this.judgeValue(v)
      }
      this.inputEvent(v)
      this.$emit('blur', v)
    },
    changeValue(i) {
      if (this.disabled) {
        return
      }
      let arr = (this.value ? this.value.toString() : '').split('.')
      let num = Number(arr[0]) + i
      this.decimal && arr[1] ? (num += '.' + arr[1]) : null
      let v = this.judgeValue(Number(num))
      this.inputEvent(v)
    },
  },
  mounted() {},
  destroyed() {},
}
</script>

<style scoped>
.thisNumber {
  line-height: 32px;
  width: auto;
  display: inline-block;
}
.thisNumber >>> .el-input {
  width: auto !important;
}
.thisNumber >>> .el-input input {
  width: 200px;
  padding: 0 40px;
}
.thisNumber .el-input-number__increase,
.thisNumber .el-input-number__decrease {
  line-height: 30px;
  width: 34px;
}
.thisNumber .el-input-number__decrease:not(.is-disabled):hover,
.thisNumber .el-input-number__increase:not(.is-disabled):hover {
  color: #3d7eff;
}
.thisNumber.small {
  height: 26px;
  line-height: 26px;
}
.thisNumber.small .el-input-number__decrease,
.thisNumber.small .el-input-number__increase {
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.thisNumber.small /deep/ .el-input__inner {
  height: 26px;
  padding: 0 30px;
}
.thisNumber
  /deep/
  .el-input-number__increase:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled):not(:focus),
.thisNumber
  /deep/
  .el-input-number__decrease:hover:not(.is-disabled)
  ~ .el-input
  .el-input__inner:not(.is-disabled):not(:focus) {
  border-color: #c0c4cc;
}
</style>
